<template>
  <k-view class="popup">
    <k-view class="input-container">
      <SearchInput
        class="search-input"
        v-model="searchVal"
        :clearable="true"
        placeholder="请输入公司代码/名称"
        @on-change="search"
      />
      <k-text class="text" @click="search(searchVal)">搜索</k-text>
    </k-view>
    <k-view v-show="!searchVal">
      <k-view class="industry">
        <k-text class="content-title">同类行业股票</k-text>
        <StockItem
          v-for="({ stockCode, stockName }, index) in sameIndustry"
          :key="stockCode"
          :stockName="stockName"
          :stockCode="stockCode"
          :originCode="originOptions.stockCode"
          :originName="originOptions.stockName"
        />
      </k-view>
      <k-view class="hot-list">
        <img src="../../assets/stock/pk-bg.png" alt="" class="pk-bg" />
        <k-text class="content-title">同花顺热榜</k-text>
        <StockItem
          v-for="({ stockCode, stockName }, index) in hotStockList"
          :key="stockCode"
          :stockName="stockName"
          :stockCode="stockCode"
          :sequence="index + 1"
          :originCode="originOptions.stockCode"
          :originName="originOptions.stockName"
        />
      </k-view>
    </k-view>
    <emptyView
      v-show="(!searchStockList.length || isLoading) && searchVal"
      :loading="isLoading"
      msg="没有找到相关结果"
      height="130vw"
    >
    </emptyView>
    <k-view v-show="searchVal && searchStockList.length && !isLoading" class="search-container">
      <StockItem
        v-for="{ stockCode, stockName } in searchStockList"
        :key="stockCode"
        :stockName="stockName"
        :stockCode="stockCode"
        :originCode="originOptions.stockCode"
        :originName="originOptions.stockName"
      />
    </k-view>
  </k-view>
</template>

<script setup lang="ts">
import SearchInput from '@/components/Home/searchInput.vue';
import StockItem from '@/components/StockDiagnosis/stockItem.vue';
import emptyView from '@/components/Home/emptyView.vue';
import getThemeHooks from '@/hooks/getThemeHooks';

import { onMounted, reactive, ref } from 'vue';
import { getIndustryStockList, getHotStockList, searchStockInfo } from '@/apis/index';

import { getUrlSearch, setCookie } from '@/utils/index';
import { StockInfo } from '@/types/popup';
import Apis from '@king-fisher/apis';
import { PAGEID } from '@/config/stat';
import { sendPageStat } from '@/utils/stat';

const { getTheme, initTheme, onThemeChange } = getThemeHooks();
const searchVal = ref<string>('');
const isLoading = ref<boolean>(false);
// 原始股票代码和名称
const originOptions: StockInfo = reactive({
  stockCode: '',
  stockName: '',
});
const sameIndustry = ref<StockInfo[]>([]);
const hotStockList = ref<StockInfo[]>([]);
const searchStockList = ref<StockInfo[]>([]);
// 搜索
const search = (value: string) => {
  isLoading.value = true;
  searchStockList.value = [];
  searchStockInfo(value)
    .then((res: any) => {
      const codeTypeName = ['沪A', '深A', '京A', '科创', '创'];
      const list = res.data.body;
      list.forEach((item: any) => {
        // 只有符和codeTypeName数组内的股票才显示
        if (codeTypeName.includes(item[5])) {
          searchStockList.value.push({
            stockCode: item[0],
            stockName: item[1],
          });
        }
      });
    })
    .catch(dealError)
    .finally(() => {
      isLoading.value = false;
    });
};
// catch错误
const dealError = () => {
  Apis.Toast.show('数据异常请稍后重试！');
};
// 获取同行业
const getIndustryStock = () => {
  getIndustryStockList(originOptions.stockCode)
    .then((res: any) => {
      if (res.status_code) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      const stockList = res.data.list.slice(0, 5);
      sameIndustry.value = stockList.map((item: any) => ({
        stockCode: item.stock_code,
        stockName: item.stock_name,
      }));
    })
    .catch(dealError);
};
// 获取热股
const getHotStock = () => {
  getHotStockList()
    .then((res: any) => {
      if (res.status_code) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      const stockList = res.data.stock_list.slice(0, 5);
      hotStockList.value = stockList.map((item: any) => ({
        stockCode: item.code,
        stockName: item.name,
      }));
    })
    .catch(dealError);
};
onMounted(() => {
  setCookie().then((id: any) => {
    sessionStorage.setItem('userIdKey', id);
    sendPageStat(`${PAGEID.PKSEARCH}`);
  });
  getTheme();
  initTheme();
  onThemeChange();
  const query = getUrlSearch();
  if (query) {
    originOptions.stockCode = query.stockCode;
    originOptions.stockName = decodeURIComponent(query.stockName);
  }
  getHotStock();
  getIndustryStock();
});
</script>

<style scoped lang="less">
.popup {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: #ffffff;
  padding-top: 12px;

  .input-container {
    display: flex;
    padding-bottom: 24px;
    border-bottom: 1px solid #ebebeb;

    .search-input {
      width: 602px;
      height: 64px;
      margin-left: 32px;
    }

    .text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 116px;
      font-family: PingFangSC-Medium;
      font-size: 28px;
      color: #262626;
      letter-spacing: 1px;
      text-align: center;
      font-weight: bold;
    }
  }

  .content-title {
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #323232;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 500;
    padding-bottom: 20px;
  }

  .industry {
    padding: 32px 32px 0;

    :deep(.stock-item:not(:last-child)) {
      border-bottom: 1px solid #ebebeb;
    }
  }

  .hot-list {
    position: relative;
    background-image: linear-gradient(
      180deg,
      rgba(255, 80, 80, 0.05) 0%,
      rgba(255, 80, 80, 0) 22%,
      rgba(255, 80, 80, 0) 100%
    );
    padding: 32px 32px 0;

    :deep(.stock-item:not(:last-child)) {
      border-bottom: 1px solid #ebebeb;
    }

    .pk-bg {
      position: absolute;
      width: 126px;
      height: 66px;
      top: 20px;
      right: 50px;
    }
  }

  .search-container {
    padding: 0 32px;
    margin-top: 24px;

    :deep(.stock-item:not(:last-child)) {
      border-bottom: 1px solid #ebebeb;
    }
  }
}

[theme-mode='black'] .popup {
  background-color: #121212;

  .text {
    color: rgba(255, 255, 255, 0.84);
  }

  .search-container {
    :deep(.stock-item:not(:last-child)) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
  }

  .industry,
  .hot-list {
    :deep(.stock-item:not(:last-child)) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
  }

  .input-container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    .title-content {
      color: #d2d2d3;
    }
  }

  .content-title {
    color: rgba(255, 255, 255, 0.84);
  }
}
</style>
